import React, { useEffect } from 'react';
import { isFunction } from 'loadsh';

function Tbody(props) {
  const { dataSource, list } = props;
//   console.log('list ===> ', list);
  useEffect(() => {
    // console.log('Tbody 渲染');
  }, []);
  return (
    <tbody>
      {dataSource?.map((product, index) => (
        <tr key={index}>
          {list?.map((v, i) => {
            /* 判断render函数是否存在 */
            return (
              <td key={i}>
                {v.render && isFunction(v.render)
                  ? v.render(product[v.dataIndex], product)
                  : product[v.dataIndex] || ''}
              </td>
            );
          })}
        </tr>
      ))}
    </tbody>
  );
}

export default Tbody;

// 1、useMemo和useCallback都是具有缓存作用的，只是他们缓存对象不一样，一个是属性，一个是缓存函数，特点都是，当缓存依赖的没变，去获取还是获取曾经的缓存
// 2、useMemo是对函数组件中的属性包装，返回一个具有缓存效果的新的属性，当依赖的属性没变化的时候，这个返回新属性就会从缓存中获取之前的。
// 3、useCallback是对函数组件中的方法缓存，返回一个被缓存的方法
